<template>
  <div id="footers">
    <div class="content">
      <el-row>
        <el-col :span="12">
          <h4 class="tit">联系我们</h4>
          <p class="p2">联系电话：999</p>
          <p class="p3">商务邮箱：</p>
          <p class="p3">客服QQ:</p>
          <p class="p4" style="margin-top: 30px">
            <span class="span1">关于我们</span>
            <span class="span1 span2">常见问题</span>
            <span class="span1 span2">提交工单</span>
          </p>
        </el-col>
        <el-col :span="6">
          <h4 class="tit">为你服务</h4>
          <div class="tit_qq">
            <span class="tit_qq_img">
              <img src="" />
            </span>
            <span>点击加入QQ交流群</span>
          </div>
          <div class="tit_qq">
            <span class="tit_qq_img">
              <img src="" />
            </span>
            <span>联系客服免费试用</span>
          </div>
        </el-col>
        <el-col :span="6">
          <h4 class="tit">关注我们</h4>
          <img src="" alt width="120" />
        </el-col>
      </el-row>
      <div class="black_line"></div>
      <div style="display: flex; padding: 20px 0">
        <div class="lianjie_top">友情链接</div>
        <div class="display-link">
          <a class="lianjie" href="http://www.mengwanghulian.com/?source=xm&plan=yl/">梦网互联</a>
          <a class="lianjie" href="https://www.bitbrowser.cn/?code=ab0cdb">比特浏览器</a>
          <a class="lianjie" href="https://www.firebrowser.cn/?code=KF42LUJXPY">火豹浏览器</a>
        </div>
      </div>
      <div class="black_line1"></div>
      <p class="p0">
        禁止利用本站资源从事任何违反本国（地区）法律法规的活动 &nbsp;&nbsp;增值电信业务经营许可证&在线数据处理与交易处理业务 ---
        &nbsp;&nbsp;&nbsp;&nbsp;国内互联网虚拟专用网业务 ---
        <a href="https://beian.miit.gov.cn" target="_blank" style="margin-left: 20px" class="bei_an">---</a>
      </p>
      <div class="record_list p0">
        <a href="http://www.beian.gov.cn" target="_blank"><img src="" alt width="20px" /></a>
        <a href="http://www.beian.gov.cn" target="_blank"><img src="" alt width="20px" /></a>
        <span>-公网安备</span>
        <span>-号</span>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'
  import { getBlogrollList } from '../../../api/user.js'
  export default {
    name: 'VabAppMain',
    data() {
      return {
        fullYear: new Date().getFullYear(),
      }
    },
    computed: {
      ...mapGetters({
        footer: 'user/footer',
      }),
    },

    created() {},
    mounted() {
      // this.setFooter()
      console.log(123, this.footer)
    },
    methods: {
      ...mapActions({
        setFooter: 'user/setFooter',
      }),
    },
  }
</script>

<style lang="scss" scoped>
  #footers {
    padding: 60px 0;
    width: 100%;
    background-color: #282d4d;
    text-align: left;
    .display-link > a {
      margin-right: 20px;
      color: #919cab;
      font-size: 14px;
    }
    .el-col-12 {
      width: 50%;
    }
    .content {
      margin: 0 auto;
      width: 1200px;
    }

    .black_line1 {
      width: 1200px;
      height: 1px;
      background-color: #201c2f;
    }

    .lianjie_top {
      color: #fff;
      font-weight: 500;
      font-size: 16px;
      margin-right: 20px;
    }

    .lianjie {
      margin-right: 20px;
      color: #919cab;
      font-size: 14px;
    }

    .lianjie:hover {
      color: #3373fc;
    }

    p {
      height: 19px;
      margin: 0;
      padding: 0;
    }

    .black_line {
      width: 1200px;
      height: 1px;
      background-color: #201c2f;
      margin-top: 11px;
    }
    .p0 {
      color: #919cab;
      margin-top: 33px;
      font-size: 12px;

      .bei_an {
        color: #919cab;
        text-decoration: none;
      }

      .bei_an:hover {
        color: #ff6a00;
      }
    }

    .tit {
      color: #fff;
      font-weight: bold;
      font-size: 18px;
      margin: 0;
      margin-bottom: 20px;
    }

    .tit_qq {
      color: #919cab;
      font-size: 14px;
      border: 1px solid #3d4452;
      padding: 13px 21px;
      width: 166px;
      -webkit-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      transition: all 0.5s linear;

      &:hover {
        color: #fff;
        background-color: #1475ff;
      }

      cursor: pointer;
      margin-bottom: 19px;

      .tit_qq_img {
        vertical-align: middle;
        margin-right: 10px;
      }
    }

    .p1,
    .p2,
    .p3,
    .p4 {
      font-size: 14px;
      color: #919cab;
      margin-bottom: 20px;
    }

    .span1 {
      margin-right: 48px;
      cursor: pointer;
      -webkit-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      transition: all 0.5s linear;

      &:hover {
        color: #fff;
      }
    }

    .span2 {
      margin-left: 12px;
    }
  }
</style>
